<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
    <div id="app"></div>
    <script>
        const { reactive, readonly, shallowReadonly, shallowReactive, effect } = VueReactivity;
        

        /*
            数组的问题：
            1
            let arr = [1,2,3]  arr的length是3， 我们不删除arr中的值，而是修改arr.length = 2，
                这时候arr = [1,2]，arr[2]从3变成了undefined，应该触发arr[2]的更新，但是我们并没有进入arr[2]的set方法
            
            2 
            我们监听arr.length 属性，然后我们往arr中push，arr的length会变化，但是并不会触发length的set方法
               因为当调用push方法新增时，会将新增的数据添加到数组中后会直接修改length为最新+1后的值


               之后在触发length的set更新时，这时old和new一样，所以不会触发更新
            
        */

    
        // 数组想触发更新 但是你写的代码中没用到索引，所以更新的时候 ，因为此索引没有收集依赖，所以不会触发更新
        let obj = { name: 'zf', age: 12, address: { num: 504 }, arr: [1, 2, 3, 4] };
        debugger
        let r1 = reactive(obj)
        
        effect(() => {
            // 1 监听索引， 修改.length小于监听的索引
            // console.log(r1.arr[2]);


            // 2 监听.lentgth，往数组中push数据
            console.log(r1.arr.length);
        })

        // setTimeout(() => {

            // 1 
            // r1.arr.length = 1 // 解决：我们需要检测 当前改变的长度是否小于数组响应式中监听的长度，如果小于，要将其索引对应的effect添加进入队列


            // 2 
            // 解决：我们在调用set中判断当前set是新增还是修改，如果是新增逻辑，并且是数组新增，key还是数字，那么就是push等方法 需要触发length的更新，将length的effect添加到更新队列
            debugger
            r1.arr.push(5);


             /**
             *
             * 会给数组添加一项索引为4的 并且更改length属性 
             * 在set方法中 key为 '4'，value为：'6'
             * 
            */
 
        // }, 1000);

    </script>
</body>

</html> =